<template>
    <div class="IntegralList">
        <el-card class="IntegralList-header">
            <div class="search-input">
                <p class="search-input-name">商品名称 : </p>
                <el-input class="search-input-tool" v-model="goodsName" placeholder="请输入商品名称" />
            </div>
            <div class="search-select">
                <p class="search-select-name">商品标签 : </p>
                <el-select class="search-input-tool" v-model="goodsLabel" clearable placeholder="请选择商品标签">
                    <el-option
                        v-for="item in labelOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </div>
            <div class="search-select">
                <p class="search-select-name">所属菜单 : </p>
                <el-select class="search-input-tool" v-model="owningMenu" clearable placeholder="请选择所属菜单">
                    <el-option
                        v-for="item in menuOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </div>
            <el-button 
                type="primary" 
                class="opera-search"
                :icon="Search"
                @click="SearchOpera" 
            >搜索</el-button>
            <el-button 
                class="opera-search"
                :icon="Refresh"
                @click="RefreshOpera" 
            >重置</el-button>
        </el-card>
        <el-card class="IntegralList-section">
            <!-- <el-button type="primary" @click="CreateScoreGoods" class="opera-createMenu">新建商品</el-button> -->
            <div class="IntegralList-content">
                <TableModules :data="goodsData">
                    <template #tableContent>
                        <el-table-column prop="name" align="left" label="名称"/>
                        <el-table-column prop="header" align="left" label="简介" />
                        <el-table-column prop="details" align="left" label="详情介绍" >
                            <template #default="scope">
                                <p class="detailsIntroduction" :title="scope.row.details">{{ scope.row.details }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" align="center" label="积分" />
                        <el-table-column prop="category_id" align="left" label="标签">
                            <template #default="scope">
                                <el-tag 
                                    v-for="(item,idx) in scope.row.category_id" 
                                    :key="idx"
                                    >
                                    {{ labelOptions.find(i => i.code == item)?.name }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="menu_name" align="center" label="所属菜单" />
                        <el-table-column fixed="right" align="center" label="操 作" width="200">
                            <template #default="scope">
                                <el-button type="primary" @click="EditScoreGoods(scope.row)">修 改</el-button>
                                <el-button type="danger" @click="DeletScoreGoods(scope.row)">删 除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </TableModules>
            </div>
            <div class="IntegralList-footer">
                <PaginationModules
                    :pageTotal="pageTotal"
                    @currentClick="CurrentClick" 
                ></PaginationModules>
            </div>
        </el-card>
    </div>
</template>
    
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import TableModules from '@/components/TableModules.vue';
import PaginationModules from '@/components/PaginationModules.vue'
import { GetScoreGoodsReq, DeletScoreGoodsReq, GetMenuList, GetTagList } from '../utils/api/index.js'
import { Search,Refresh } from '@element-plus/icons-vue';

const router = useRouter()
const goodsName = ref(undefined); // 商品名称
const goodsLabel = ref(undefined); // 商品标签
const owningMenu = ref(undefined); // 所属菜单
const goodsData = ref([]); // 商品数据
const labelOptions = ref([]);
const menuOptions = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const pageTotal = ref(0); // 总条数

const SearchOpera = () => {
    GetScoreGoodsList(goodsName.value,goodsLabel.value,owningMenu.value);
}
const RefreshOpera = () => {
    goodsName.value = undefined;
    goodsLabel.value = undefined;
    owningMenu.value = undefined;
    GetScoreGoodsList();
}
const GetConfig = async () => {
    let menuListRes = await GetMenuList({});
    if(menuListRes.code == 200) {
        menuOptions.value = menuListRes.data.list;
    }
    let tagListRes = await GetTagList({})
    if(tagListRes.code == 200) {
        labelOptions.value = tagListRes.data.list
    }
}
const GetScoreGoodsList = async (name,category,menu) => {
    let scoreGoodsRes = await GetScoreGoodsReq({
        name,
        category,
        menu,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    });
    if(scoreGoodsRes.code == 200) {
        goodsData.value = scoreGoodsRes.data.list;
        pageTotal.value = scoreGoodsRes.data.total;
    }
};
onMounted(() => {
    GetConfig();
    GetScoreGoodsList();
})
// 创建商品
// const CreateScoreGoods = () => {
//     router.push('/CreateIntegralGoods')
// }
// 修改商品
const EditScoreGoods = (rowVal) => {
    sessionStorage.editData = JSON.stringify(rowVal);
    router.push({
        name: 'CreateIntegralGoods',
        query: {
            isEdit: true
        }
    })
}
// 删除商品
const DeletScoreGoods = (rowValue) => {
    // eslint-disable-next-line no-undef
    ElMessageBox.confirm(
        '确定要删除吗？',
        '删除菜单',
        {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
        }
    )
    .then(() => {
        DeletScoreGoodsReq({
            id: rowValue.id
        }).then((res) => {
            if(res.code == 200) {
                GetScoreGoodsList();
                // eslint-disable-next-line no-undef
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
            }
        })
    })
};
// 分页前进/后退
const CurrentClick = (pageVal) => {
    pageNum.value = pageVal;
    GetScoreGoodsList(goodsName.value,goodsLabel.value,owningMenu.value);
}
</script>
    
<style scoped lang="scss">
.IntegralList{
    width: 100%;
    height: 100%;
    &-header{
        height: 85px;
        :deep(.el-card__body){
            display: flex;
            align-items: center;
            .search-input, .search-select{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:nth-child(n + 2) {
                    margin: 0 0 0 20px;
                }
                &-tool{
                    width: 200px;
                    margin: 0 0 0 20px;
                }
            }
            .opera-search{
                margin: 0 0 0 20px;
            }
            .opera-createMenu{
                margin: 0 0 0 20px;
            }
        }
    }
    &-section{
        width: 100%;
        height: calc(100% - 85px - 10px) ;
        display: flex;
        flex-direction: column;
        margin: 10px 0 0;
        :deep(.el-card__body){
            height: 100%;
        }
        .IntegralList-content{
            height: calc(100% - 50px) ;
            display: flex;
            .cell{
                .el-tag {
                    &:nth-child(n+1){
                        margin-left: 10px;
                        margin-top: 5px;
                    }
                }
                .detailsIntroduction{
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    max-height: 50px;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }
            }
        }
        .IntegralList-footer{
            height: 50px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
}
</style>